<template>
  <div id="app" >
    <div class="todos">
      <!-- 头部组件 -->
      <todo-header :addTodo="addTodo" :setCheckAll="setCheckAll" :list="list"></todo-header>

      <!-- session组件 -->
      <todo-list :list="list"></todo-list>

      <!-- footer组件 -->
      <todo-footer :total="list" :clearCompleted="clearCompleted"></todo-footer>
    </div>
    
  </div>
</template>
<script>
  import TodoHeader from './components/TodoHeader.vue'
  import TodoFooter from './components/TodoFooter.vue'
  import TodoList from './components/TodoList.vue'
  export default {
    name :'App',
    components:{TodoHeader,TodoFooter,TodoList},
    data:function () {
      return {
        list: JSON.parse(localStorage.getItem('todoMvc')) || []
      }
    },
    methods:{
      // 添加一条todo
      addTodo: function (data) {
        this.list.push(data)
        localStorage.setItem('todoMvc', JSON.stringify(this.list));
      },
      setCheckAll(flag) {
        this.list.forEach(item => item.isComplete = flag)
      },
      clearCompleted:function() {
        this.list = this.list.filter(item => !item.isComplete)
      },
      removeItem(todo) {
        this.list = this.list.filter(item => item !== todo)
        localStorage.setItem('todoMvc', JSON.stringify(this.list))
      }
    },
    mounted() {
      this.$bus.$on('removeitem', (todo) => {
        this.removeItem(todo)
      })
    },
  }

</script>

<style>
  body {
    background-color: #2e2e2e;
  }
  .todos {
    width: 800px;
    margin: 50px auto;
    background-color: #fff;
    padding: 15px;
  }
  ul,li,p,div,html,body,h1 {
    padding: 0;
    margin: 0;
  }
  em,i,u {
    font-style: normal;
  }
  li {
    list-style-type: none;
  }
</style>
